<html>
<head>
    <title>Test :: Topbar Toolbar</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="https://informatics-apps.systemsbiology.net/ext-js-3.4.0/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="https://informatics-apps.systemsbiology.net/ext-js-3.4.0/examples/shared/examples.css"/>
    <script type="text/javascript" src="https://informatics-apps.systemsbiology.net/ext-js-3.4.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="https://informatics-apps.systemsbiology.net/ext-js-3.4.0/ext-all-debug.js"></script>

    <script type="text/javascript" src="../js/topbar.js"></script>
    <script type="text/javascript" src="../js/widgets.js"></script>

    <link rel="stylesheet" type="text/css" href="../css/stylesheet.css"/>

    <script type="text/javascript">
        Ext.onReady(function() {
            var panelTbar = new org.systemsbiology.addama.js.TopBarToolbar({
                listeners: {
                    whoami: function() { org.systemsbiology.addama.js.Message.show("Test", "Panel TBar loaded!"); }
                }
            });

            var northToolbar = new org.systemsbiology.addama.js.TopBarToolbar({
                region: "north",
                height: 30,
                listeners: {
                    whoami: function() { org.systemsbiology.addama.js.Message.show("Test", "North Toolbar loaded!"); }
                }
            });

            new Ext.Viewport({
                frame: true,
                border: true,
                layout:'border',
                items:[
                    northToolbar,
                    {
                        contentEl: "c_main",
                        region: "center",
                        margins: "5 5 5 5",
                        frame: true,
                        tbar: panelTbar,
                        bbar: new org.systemsbiology.addama.js.TopBarToolbar({ height: 30, buttonAlign: "center" })
                    },
                    new org.systemsbiology.addama.js.TopBarToolbar({ region: "south", height: 40, buttonAlign: "left" })
                ]
            });

            var otherMenu = {
                text: "Other Menu",
                menu: [
                    new Ext.Action({
                        text: "Institute for Systems Biology",
                        handler: function() { document.location = "http://systemsbiology.org"; }
                    })
                ]
            };

            panelTbar.add(otherMenu);
            northToolbar.add(otherMenu);
        });
    </script>
</head>
<body>
<div id="c_main">Some more content. A lot of content.  Here is some more, who knows how much it will be, because I'm really really
    looking for a lot of content.  Surely that is still not enough.  Nope there is never enough content in my book, as
    long as I have to think about the amount of content I need in this container, I will continue to add content.</div>
</body>
</html>